<script setup lang="ts">
import { ref } from 'vue'

const myModal = ref()

let title = ref<string>('选择的平台账号')
let type = ref<string>('robot')
const showModal = (list: Array<any>, t = 'robot') => {
  type.value = t
  type.value == 'robot' ? (title.value = '选择的平台账号') : (title.value = '选择的院线')

  myModal.value?.showModal()

  dataSource.value = list

  // for (let i = 0; i < 23; i++) {
  //   dataSource.value.push(...list)
  // }
}

defineExpose({
  showModal,
})

const dataSource = ref<Array<any>>([])
const columns = [
  {
    title: 'id',
    key: 'id',
    width: 150,
  },
  {
    key: 'name',
    width: 180,
  },
  {
    title: '编号',
    key: 'number',
    width: 180,
  },
]
</script>

<template>
  <MyModal ref="myModal" :title="title" :top="25" :width="1000">
    <template #content>
      <a-table
        style="height: 500px; overflow-y: scroll"
        :columns="columns"
        :data-source="dataSource"
        :pagination="false"
        :scroll="{ y: 400 }"
      >
        <template #emptyText>
          <a-empty description="暂无数据" />
        </template>

        <template #headerCell="{ column }">
          <template v-if="column.key === 'id'">
            <div>id</div>
          </template>

          <template v-else-if="column.key === 'name'">
            <div v-if="type == 'robot'">昵称</div>
            <div v-if="type == 'limit'">院线</div>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'id'">
            <div style="width: 150px">{{ record.id }}</div>
          </template>

          <template v-else-if="column.key === 'name'">
            <div style="width: 180px">
              <a-tag color="blue">{{ record.name }}</a-tag>
            </div>
          </template>

          <template v-else-if="column.key === 'number'">
            <div style="width: 180px">{{ record.number }}</div>
          </template>
        </template>
      </a-table>
    </template>
  </MyModal>
</template>
